<template>
  <div class="detail">
    <!-- 头部气泡弹出框 -->
   <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.go(-1)">
  <template #right>
   <van-popover v-model:show="showPopover" theme="dark" :actions="actions" placement="bottom-end"  @select="onSelect">
  <template #reference>
   <van-icon name="ellipsis" size="25" />
  </template>
</van-popover>
  </template>
  </van-nav-bar>
  <!-- 分享面板 -->
 <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onshare"/>
 <!-- 轮播图组件 -->
 <van-swipe  lazy-render class="my-swipe">
  <van-swipe-item v-for="(item,index) in images" :key="index">
    <img :src="item" @click="clickimg(index)"/>
    </van-swipe-item>
</van-swipe>
<!--播放按钮  -->
<van-button class="play_btn" @click="playvideoFn" icon='video' color="linear-gradient(to right, #ff6034, #ee0a24)"></van-button>
 <!-- 气泡遮罩层 -->
  <van-popup @close="handlePopupClose" v-model:show="showVideo" teleport="body">
 <video ref="video" controls autoplay muted
 src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4" preload='true'>
 </video>
  </van-popup>
 <!-- 文字 -->
 <div class="body">
   <p class="price">￥{{list.originprice}}</p>
   <div class="proname"><van-tag mark type="danger">自营</van-tag><span>{{list.proname}}</span></div>
 </div>
 <!-- 底部加入购物车 -->
 <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服"  />
  <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartnum"  @click="gocart"/>
  <van-action-bar-icon icon="shop-o" text="店铺" badge="" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addcarts"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
  </div>
</template>

<script setup lang="ts">
import {getdetail} from '../api/home'
import {addcart,watchcart} from '../api/cart'
import {useRouter,useRoute}from 'vue-router'
import { ImagePreview } from 'vant';
import { Toast } from 'vant';
import{ref,reactive} from 'vue'
import {useuserstore} from "../store/userstore"
let userstore=useuserstore()
let router = useRouter()
let route=useRoute()
// 接口数据
let list=ref([])
// 显示气泡框
const showPopover = ref(false);
// 分享面板的显示状态
const showShare=ref(false)
// 气泡框选项
const actions =[
    { text: '首页', icon: 'home-o', name: 'home', path: '/home' },
    { text: '购物车', icon: 'cart-o', name: 'cart', path: '/cart' },
    { text: '分享', icon: 'share-o', name: 'share' },
];
// 点击气泡框选项
const onSelect =(actions: { text: string, icon: string, name: string, path: string }, index: number)=>{
   if(actions.name=='share'){
     showShare.value=true
   }else{
       router.push(actions.path)
   }
}
// 分享面板的选项
 const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];
// 点击分享面板选项
const onshare=(option: { name: string, icon: string })=>{
   Toast(option.name);
//    分享面板隐藏
   showShare.value = false;
}
// 定义参数，调用接口
interface aa{
    proid:string
}
const value:aa={
    proid:route.query.id as string
}
let images =ref([])
getdetail(value).then((res:any)=>{
    images.value=res.data.banners[0].split(',')
    list.value=res.data
})
// 图片预览
const clickimg=(index:number)=>{
 ImagePreview({
  images: images.value,
  startPosition:index,
  closeable: true,
});
}
// 视频遮罩层状态
const showVideo=ref(false)
// 获取标签
const video = ref()
// 点击打开视频播放遮罩层触发
const playvideoFn = ()=> {
    // 显示遮罩层
    showVideo.value = true
    // 播放视频
    // video.value.play()
}
// 点击关闭视频播放遮罩层触发
const handlePopupClose = () => {
        // 暂停视频
        video.value.currentTime = 0
        // console.log(video);
        video.value.pause()
}
interface bb{
    userid:string,
    proid:string,
    num:string
}
const value3:bb={
    userid:localStorage.getItem("userid") as string,
    proid:route.query.id as string,
    num:"1"
}
const cartnum=ref("")
// 点击加入购物车
const addcarts=()=>{
addcart(value3).then((res:any)=>{
    if(res.code==200){  
        watchcart({userid:localStorage.getItem("userid") as string }).then((res:any)=>{
          cartnum.value =res.data.length
})}
})
}
watchcart({userid:localStorage.getItem("userid") as string}).then((res:any)=>{
    cartnum.value = res.data.length
    console.log(res);
    
})

const gocart=()=>{
  router.push("/cart")
}
</script>



<style scoped lang="scss">
  .my-swipe {
    position: relative;

    img{
        width: 100%;
        height:375px
    }
}
.detail {
    position: relative;
}
.price{
    font-size:20px;
    font-weight:600;
    color:red;
}
.proname{
    font-size:15px;
    font-weight:600;
}
:deep(.play_btn) {
    position: absolute;
    bottom: 120px;
    left: 50%;
    height: 30px;
    transform: translate(-50%);
    width:30px;
}

:deep(.van-popup) {
    width: 100%;
    height: 100%;
}

video {
    width: 100%;
}
</style>